<template>
	<view>
		<!-- 头部菜单 -->
		<view class="flex justify-between margin-left margin-right">
			<view  v-for="(item,index) in classify" 
					:key="index"
					@tap="itemClick(item,index)"
					:class="classifyIndex.id==item.id?'clssify-act':''"
					class="flex flex-direction clssify-item">
				<image :src="item.icon" ></image>
				<text class="text-sm">{{item.name}}</text>
			</view>
		</view>
		<!-- 菜单介绍说明：目前以文字形式，后期跟进情况加入图文，视频介绍等说明 -->
		<view class="margin info-box" :style="{'background-color':classifyIndex.color}">
			<text class="text-white">{{classifyIndex.info}}</text>
		</view>
	</view>
	
</template>

<script>
	import classifyConf from '../classifyConf'
	export default{
		name:'classify',
		data(){
			return {
				classify:classifyConf,
				text:'',
				classifyIndex:classifyConf[0],
				
			}
		},
		created() {
		},
		methods:{
			itemClick(item,index){
				this.classifyIndex=item
			}
		}
	}
</script>

<style lang="scss">
	.clssify-item{
		width: 120upx;
		height: 120upx;
		border-radius: 14upx;
		border: 1px solid #eee;
		align-items: center;
		justify-content: center;
		image{
			width: 60upx;
			height: 60upx;
		}
		text{
			margin-top: 6upx;
		}
	}
	.clssify-act{
		border: 1.5px solid #ffb4bc;
	}
	.info-box{
		padding: 32upx;
		border-radius: 8upx;
		min-height: 160upx;
		line-height: 1.8;
	}
</style>
